<template>
  <a-card :bordered="true" title="Sku信息" style="margin-top: 24px">
    <a-table :columns="columns" :rowKey="record.id" :data-source="dataSource" bordered>
      <template slot="skuName" slot-scope="text, record, index">
        <a-input v-model="record.skuName" style="margin: -5px 0" placeholder="请输入商品名称" />
      </template>
      <template slot="skuTitle" slot-scope="text, record, index">
        <a-input v-model="record.skuTitle" style="margin: -5px 0" placeholder="请输入商品标题" />
      </template>
      <template slot="skuSubtitle" slot-scope="text, record, index">
        <a-input v-model="record.skuSubtitle" style="margin: -5px 0" placeholder="请输入商品副标题" />
      </template>
      <template slot="price" slot-scope="text, record, index">
        <a-input-number v-model="record.price" :min="0" :step="0.01" style="margin: -5px 0"
                        placeholder="请输入商品价格" />
      </template>
      <template slot="action" slot-scope="text, record, index">
        <a @click="editSpuInfo(record)">编辑</a>
      </template>
    </a-table>
    <sku-model @ok="ok" ref="skuModel"></sku-model>
    <a-form-model>
      <a-row style="display: flex;justify-content: center;margin-top: 24px">
        <a-button @click="prev">上一步</a-button>
        <a-button @click="onSubmit" type="primary" style="margin-left: 12px">保存</a-button>
      </a-row>
    </a-form-model>
  </a-card>
</template>
<script>
import SkuModel from './modules/SkuModel.vue'

const firstColumns = {
  title: '序号',
  dataIndex: '',
  key: 'rowIndex',
  width: '5%',
  align: 'center',
  customRender: function(t, r, index) {
    return parseInt(index) + 1
  }
}
const secondColumns = {
  title: '属性分组',
  width: '30%',
  children: []
}
const lastColumns = [
  {
    title: '商品名称',
    dataIndex: 'skuName',
    width: '15%',
    align: 'center',
    scopedSlots: { customRender: 'skuName' }
  }, {
    title: '标题',
    dataIndex: 'skuTitle',
    width: '15%',
    align: 'center',
    scopedSlots: { customRender: 'skuTitle' }
  }, {
    title: '副标题',
    dataIndex: 'skuSubtitle',
    width: '15%',
    align: 'center',
    scopedSlots: { customRender: 'skuSubtitle' }
  }, {
    title: '价格',
    dataIndex: 'price',
    width: '10%',
    align: 'center',
    scopedSlots: { customRender: 'price' }
  }
]

export default {
  props: {
    skuModel: {
      type: Object
    }
  },
  components: { SkuModel },
  watch: {
    skuModel: {
      handler(newVal) {
        this.innerModel = newVal
      },
      deep: true
    },
    innerModel: {
      handler(newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  },
  created() {
    this.images = []
  },
  data() {
    return {
      loading: false,
      editVisible: false,
      innerModel: {},
      spuModel: {},
      saleModel: {},
      columns: [],
      columnsList: [],
      dataSource: [],
      record: {},
      images: [],
      memberList: [],
      url: {
        initMemberList: '/member/memberLevel/list'
      }
    }
  },
  methods: {
    /**
     * 初始化表格
     * @param form
     */
    initSkuTable(form) {
      let saleModel = form.saleModel
      let spuModel = form.spuModel
      this.saleModel = saleModel
      let list = this.saleModel.specList.filter(item => item.specValue != null)
      this.initColumns(list)
      this.initSpuTable(spuModel)
      this.initDataSource(list)
    },
    /**
     * 初始化表格
     * @param spuModel
     */
    initSpuTable(spuModel) {
      this.memberList = []
      this.memberList = spuModel.memberList
      this.images = []
      let list = spuModel.images.split(',')
      list.forEach(item => {
        this.images.push({
          url: item,
          isChecked: false,
          isDefault: false
        })
      })
    },
    /**
     * 初始化表头
     * @param list
     */
    initColumns(list) {
      this.columns = []
      this.columnsList = []
      this.columns.push(firstColumns)
      secondColumns.children = []
      list.forEach(item => {
        secondColumns.children.push(
          {
            title: item.attrName,
            dataIndex: item.id,
            align: 'center'
          }
        )
      })
      this.columns.push(secondColumns)
      for (let lastColumn of lastColumns) {
        this.columns.push(lastColumn)
      }
      this.columns.push({
        width: '10%',
        title: '设置',
        align: 'center',
        scopedSlots: { customRender: 'action' }
      })
      lastColumns.forEach(item => {
        this.columnsList.push(item.title)
      })
    },
    /**
     * 初始化表格数据
     * @param dataList 数据列表
     */
    initDataSource(dataList) {
      this.dataSource = []
      let specList = dataList.filter(item => item.valueType == 0)
      let saleList = dataList.filter(item => item.valueType == 1)
      let list = []
      for (let item of saleList) {
        let obj = {}
        obj['attrId'] = item.id
        obj['specValue'] = item.specValue
        list.push(obj)
      }
      const result = list.reduce((acc, curr) => {
        const { attrId, specValue } = curr // 获取 curr.id
        const temp = []
        acc.forEach(item => {
          specValue.forEach(val => {
            temp.push({ ...item, [attrId]: val, skuName: '', skuTitle: '', skuSubtitle: '' })
          })
        })
        return temp.length > 0 ? temp : specValue.map(val => ({ [attrId]: val }))
      }, [])
      for (let item of specList) {
        result.forEach((it, index) => {
          it[item.id] = item.specValue
          it['id'] = index
          it['images'] = _.cloneDeep(this.images)
          it['discountItem'] = ''
          it['discount'] = ''
          it['discountOffers'] = false
          it['fullItem'] = ''
          it['full'] = ''
          it['fullOffers'] = false
          it['memberList'] = _.cloneDeep(this.memberList)
          this.dataSource.push(it)
        })
      }
    },
    /**
     * 编辑详情
     * @param record
     */
    editSpuInfo(record) {
      this.$refs.skuModel.initRecord(record)
    },
    /**
     * 上一部
     */
    prev() {
      this.$emit('prev')
    },
    /**
     * 提交表单
     */
    onSubmit() {
      console.log(this.dataSource)
      this.$emit('submit')
    },
    ok() {
      console.log(this.dataSource)
    }
  }
}
</script>
<style scoped>

</style>